@import "compass/utilities/sprites";
@import "compass/css3";


$divide: 18;
$ppr: 720px/$divide/1rem;
$pprVal: 720/18;

@function strip-units($number) {
    @return $number / ($number * 0 + 1);
}

@function addRemUnit($val, $unit: px) {
    @if $val !=0 {
        $val: $val/$pprVal;
        $val: $val + rem;
    }
    @return $val;
}

// clearfix
@mixin clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear:both;
        display: table;
    }
}


@mixin icon($sprites, $name) {
    background-repeat: no-repeat;
    background-image: sprite-url($sprites);
    background-position: addRemUnit(strip-units(nth(sprite-position($sprites, $name), 1))) addRemUnit(strip-units(nth(sprite-position($sprites, $name), 2)));
    background-size: sprite-width($sprites)/$ppr sprite-height($sprites)/$ppr;
    height:image-height(sprite-file($sprites,$name))/$ppr;
    width:image-width(sprite-file($sprites,$name))/$ppr;
}

@mixin size($sprotes,$name){
    height:image-height(sprite-file($sprotes,$name))/$ppr;
    width:image-width(sprite-file($sprotes,$name))/$ppr;
}

@mixin keyframes($animation-name) {
  @-webkit-keyframes #{$animation-name} {
    @content;
  }
  @-moz-keyframes #{$animation-name} {
    @content;
  }
  @keyframes #{$animation-name} {
    @content;
  }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
}
@mixin arrTop($width:5px , $color:$border){
    display: inline-block;
    height:0px;
    width:0px;
    overflow:hidden;
    border-width:$width;
    vertical-align:bottom;
    border-style:dashed dashed solid dashed;
    border-color:transparent transparent $color transparent;
}
@mixin arrBottom($width:5px , $color:$border){
    display: inline-block;
    height:0px;
    width:0px;
    overflow:hidden;
    border-width:$width;
    vertical-align:bottom;
    border-style:solid dashed dashed dashed;
    border-color: $color transparent transparent transparent;
}
@mixin arrLeft($width:5px , $color:$border){
    display: inline-block;
    height:0px;
    width:0px;
    overflow:hidden;
    border-width:$width;
    vertical-align:bottom;
    border-style:dashed solid dashed dashed;
    border-color:transparent $color transparent transparent
}
@mixin arrRight($width:5px , $color:$border){
    display: inline-block;
    height:0px;
    width:0px;
    overflow:hidden;
    border-width:$width;
    vertical-align:bottom;
    border-style:dashed dashed dashed solid;
    border-color:transparent transparent transparent $color;
}

